<template>
  <div class="pad-content-box form-no-padding-box padding-top-20">
     <section class="justify-center padding-bottom-15 ">
      <span class="font-size-16 font-weight-bold margin-right-15">待付信息</span>
    </section>
    <el-table class=" has-tab-header-border new-table-style" size="small" :border="true" :data="payMentList" align="center">
      <el-table-column label="支付类型" prop="fundsTypeItemName" align="center"></el-table-column>
      <el-table-column label="标题" prop="fundsDesc" align="center"></el-table-column>
      <el-table-column label="收款人" prop="chargeItemName" align="center"></el-table-column>
      <el-table-column label="事项名称" prop="chargeItemName" align="center"></el-table-column>
      <el-table-column label="申请支付金额" align="center">
        <template slot-scope="scope">
          <span>{{ (scope.row.applyAmount || 0) | fmoneyThousand }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实际支付金额" align="center" prop="paymentAmount" v-if="isEdit">
        <template slot-scope="scope">
          <el-input v-model="scope.row.paymentAmount"  placeholder="请输入" :class="(!post && !scope.row.paymentAmount)?'el-input__inners':''"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="实际支付金额" align="center" prop="paymentAmount" v-if="!isEdit">
        <template slot-scope="scope">
          <span>{{ (scope.row.paymentAmount || 0) | fmoneyThousand }}</span>
        </template>
      </el-table-column>
      <el-table-column  label="操作" width="90" align="center" v-if="isEdit">
        <template slot-scope="scope">
          <el-button type="text" @click="deleteSale(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <section class="justify-center padding-top-20 padding-bottom-15 ">
      <span class="font-size-16 font-weight-bold margin-right-15">付款信息</span>
    </section>
    <el-form label-width="130px" size="small" :model="searchParams" ref="payForm">
      <el-row :gutter="50">
        <el-col :span="8">
          <el-form-item label="付款批次" prop="batchNo">
            <el-input v-model="searchParams.batchNo" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="付款金额">
            <el-input v-model="searchParams.receivedAmount" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="付款时间" :readonly="!isEdit" prop="collectionTime" :rules="[{ required: isEdit?true:false, message: '请选择', trigger:['change','blur']}]">
            <el-date-picker 
              v-model="searchParams.collectionTime" 
              value-format="timestamp"
              placeholder="请选择"
              type="date"> 
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="付款公司">
            <el-input v-model="searchParams.paymentBank" placeholder="请输入"  clearable :readonly="!isEdit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="付款账户">
            <el-input v-model="searchParams.paymentAccount" placeholder="请输入"  clearable :readonly="!isEdit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="银行流水号">
            <el-input v-model="searchParams.serialNumber" placeholder="请输入"  clearable :readonly="!isEdit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="付款说明">
            <el-input placeholder="请输入" type="textarea" v-model="searchParams.description" clearable :readonly="!isEdit"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="sale-add">
        <div class="sale-title">审批信息</div>
      </div>
      <el-table class="margin-top-20 has-tab-header-border new-table-style"	 border align="center"  :data="tableData" >
        <el-table-column align="center" label="序号" type="index" width="150"></el-table-column>
        <el-table-column align="center" label="处理人" prop="auditorsDesc"></el-table-column>
        <el-table-column align="center" label="处理时间">
          <template slot-scope="scope">
            <span>{{ scope.row.approveTime | formatDateTime('YYYY-MM-DD HH:mm') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="处理结果">
          <template slot-scope="scope">
            <span v-if="scope.row.opinionType == 1">审核通过</span>
            <span v-else-if="scope.row.opinionType == 4">审核驳回</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="意见说明" prop="approvalMessage">
          <template slot-scope="scope">
            <span >{{scope.row.approvalMessage || '--'}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="margin-bottom-20 margin-top-10" v-if="isEdit">
        <el-button type="primary" size="small" class="f-right" @click="save">确定</el-button>
      </el-col>
    </el-form>
  </div>
</template>

<script>
  import { paymentListDelete,paymentDetail,apiFlowOption,paymentRecordCreated,apiCreateAudit } from '../../../api/payManage';
  export default {
    name: 'bill',
    data() {
      return {
        tableData:[],
        searchParams:{},
        payMentList:[],
        isEdit:false,
        post:true,
        applyUserKey:this.$route.query.applyUserKey
      };
    },
    mounted() {
      this.getInfo()
      this.getPaymentDetail()
    },
    methods: {
      async getInfo() {
        let param = { businessKey: this.$route.query.processWorkId };
        let res = await apiFlowOption(param);
        this.tableData = res.rows || [];
        if(this.applyUserKey==this.searchParams.createUser &&this.tableData[this.tableData.length-1].opinionType==4){
          this.isEdit = true
        }else {
          this.isEdit = false
        }
      },
      async getPaymentDetail(){
        let res = await paymentDetail(this.$route.query.primaryKey)
        this.payMentList = res.reportInfoList
        this.searchParams = res
      },
      async deleteSale(row){
        askDialog("是否删除？",async () => {
          const res = await paymentListDelete({ primaryKeys: [row.primaryKey] })
          this.getPaymentDetail()
        })
      },
      async save(){
        this.post = true
        if(this.payMentList.length==0){
          this.$message.error('暂无付款')
          return
        }else{
          this.payMentList.forEach(element => {
            if(!element.paymentAmount){
              this.post = false
            }
          });
        }
        if(!this.post){
          return
        }
        let reportInfoList = []
        this.payMentList.forEach(ele=>{
          reportInfoList.push({
            bizId:ele.primaryKey,
            paymentAmount:Number(ele.paymentAmount)
          })
        })
        this.$refs.payForm.validate(async valid => {
          if (valid) {
            this.searchParams.receivedAmount = Number(this.searchParams.receivedAmount)
            let res = await paymentRecordCreated({...this.searchParams,reportInfoList:reportInfoList,projectKey:localStorage.getItem('projectKey')})
            await apiCreateAudit({
              userPrimaryKey:JSON.parse(localStorage.getItem('userInfo')).key,
              businessKey: res.key, //废止合同保存的主键
              type:'应付款上报',
              typeKey: 'payable', //contractSubmit,bill,payment,contractTermination
            })
            this.closeDialog({success:true})
          }
        });
      }
    },
  };
</script>

<style lang="scss" scoped>
  .line-box {
    width: 1px;
    height: 80px;
    background: #D8D8D8;
  }

  ::v-deep .has-tab-header-border .el-tabs__header {
    border: none;
  }
  .el-input__inners{
    border:1px solid #F56C6C!important;
    border-radius: 5px!important;
  }
  .sale-add{
    display: flex;
    justify-content: space-between;
    .sale-title{
      font-size: 18px;
      font-weight: bold;
      color: #000;
      height: 30px;
      line-height: 30px;
    }
    .add{
      background: #409EFF;
      padding:0 15px;
      color:#fff;
      height: 30px;
      line-height: 30px;
      border-radius: 3px;
      cursor: pointer;
    }
  }
</style>
